<template>
  <a class="school-page-container" href="https://www.zzuli.edu.cn/" target="_blank">
    <section class="left">
      <img src="@/assets/images/school.jpg" alt="">
    </section>
    <section class="right">
      <section class="school-info">
        <p class="school-name">郑州轻工业大学</p>
        <p class="school-period">2012.09 - 2016.06</p>
      </section>
      <ul class="school-attr-list">
        <li>软件工程</li>
        <li>本科</li>
      </ul>
    </section>
  </a>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
.school-page-container {
  display: flex;
  align-items: center;
  cursor: pointer;

  .left {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    img {
      width: 50px;
      height: 50px;
      border-radius: 8px;
    }
  }

  .right {
    padding-left: 20px;
    box-sizing: border-box;

    .school-info {
      display: flex;
      align-items: center;

      .school-name {
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
        word-break: break-all;
      }
      .school-period {
        font-size: 14px;
        line-height: 20px;
        margin-left: 16px;
      }
    }

    .school-attr-list {
      display: block;
      overflow: hidden;
      margin-top: 8px;
      li{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        float: left;
        padding: 0 8px;
        line-height: 20px;
        font-size: 14px;
        margin: 0;
        &:first-child {
          padding-left: 0;
        }
      }
    }
  }
}
</style>